<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-radio-group v-model="current" @change="handleTabsClick">
        <el-radio-button v-for="(item,index) in deviceStatusList" :key="item.value"
          :label="item.value">{{item.label}}</el-radio-button>
      </el-radio-group>
    </div>
    <el-form ref="queryRef" :inline="true" label-width="100px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="2">
          <el-form-item :label="`${current == '1' ? '在' : '离'}线设备：`">
            <div style="font-size: 30px;color: #409EFF;font-weight: bold;">10</div>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="收藏：">
            <div style="font-size: 30px;color: #409EFF;font-weight: bold;">10</div>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="平均：">
            <div style="font-size: 30px;color: #409EFF;font-weight: bold;">10</div>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="点赞：">
            <div style="font-size: 30px;color: #409EFF;font-weight: bold;">10</div>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="关注：">
            <div style="font-size: 30px;color: #409EFF;font-weight: bold;">10</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="info" plain icon="Upload" >导入</el-button>
        <el-button type="warning" plain icon="Download">导出</el-button>
      </el-col>
    </el-row>
    <div>
      <Table :table-data="tableData" :border="true" size="small" :loading="loading" :columns="columns"
        :is-pagination="false" :selection="false" :show-index="true">\
        <template #action="scope">
          <div>操作</div>
          <div>删除</div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup name="deviceManage">

  const { proxy } = getCurrentInstance()
  const current = ref(1)
  const deviceStatusList = ref([
    {
      label: '在线',
      value: 1
    },
    {
      label: '离线',
      value: 0
    }
  ])
  //
  const columns = ref([
    {
      prop: 'deviceId',
      label: '设备Id',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'device',
      label: '设备',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'accout',
      label: '账号',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'dian',
      label: '电量',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'shou',
      label: '收藏',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'zan',
      label: '点赞',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'guan',
      label: '关注',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'yun',
      label: '运时',
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      fixed: 'right',
      slot: 'action',
      label: '操作',
      // minWidth: 200,
      align: 'center'
    }
  ])
  const tableData = ref([
    {
      deviceId: '1123',
      device: '设备',
      accout: '13535308888',
      dian: '100%',
      shou: '20',
      zan: '11',
      guan: '200',
      yun: '0天：0小时：0分钟',
    }
  ])
  for (var i = 0; i < 10; i++) {
    tableData.value.push({
      deviceId: `1123${i}`,
      device: `设备${i}`,
      accout: '13535308888',
      dian: `${i + 1}%`,
      shou: `${i + 2}`,
      zan: `${i + 3}`,
      guan: `${i + 4}`,
      yun: '0天：0小时：0分钟',
    })
  }
  const loading = ref(false)

  const data = reactive({})
  // const { queryParams, form, rules } = toRefs(data)
  /** 查询用户token列表 */
  function getList() {
    loading.value = true
    listUserToken(queryParams.value).then(response => {
      userTokenList.value = response.rows
      total.value = response.total
      loading.value = false
    })
  }
  const handleTabsClick = (value) => {
    current.value = value
  }


  // getList();
</script>
